<template>
  <el-dialog :title="$t('table.detail')" width="560px" :visible="true" @close="onClose" top="5vh">
    <el-form :model="form" ref="dialog-form" label-width="85px" size="small">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item :label="$t('user.username')">
            <el-input :value="form.username" readonly></el-input>
          </el-form-item>
          <el-form-item :label="$t('user.fullName')">
            <el-input v-model="form.fullName" readonly></el-input>
          </el-form-item>
          <el-form-item :label="$t('user.sex')">
            <el-radio v-model="form.sex" label="M" disabled>{{$t('user.enum.sex.M')}}</el-radio>
            <el-radio v-model="form.sex" label="F" disabled>{{$t('user.enum.sex.F')}}</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <div class="thumb-container">
            <img :src="form.avatar" class="thumb">
          </div>
        </el-col>
      </el-row>
      <el-form-item :label="$t('user.birthday')">
        <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" style="width: 100%;" :editable="false"  readonly></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('user.fullAddress')">
        <el-input v-model="form.fullAddress" readonly></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.enabled')">
        <el-radio v-model="form.enabled" :label="true" disabled>{{$t('user.enum.enabled.true')}}</el-radio>
        <el-radio v-model="form.enabled" :label="false" disabled>{{$t('user.enum.enabled.false')}}</el-radio>
      </el-form-item>
      <el-form-item :label="$t('user.group')">
        <el-input v-model="form.group.name" readonly></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.org')">
        <el-tag v-for="(item, index) in form.orgUsers" :key="item.id" style="margin-left: 5px;">{{item.orgName+'['+item.jobName+']'}}</el-tag>
      </el-form-item>
      <el-form-item :label="$t('user.roles')">
        <el-tag v-for="(item, index) in form.roles" :key="item.id" style="margin-left: 5px;">{{item.name}}</el-tag>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style>
  .thumb-container {
    width: 155px;
    height: 155px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-align: center;
    vertical-align: middle;
  }
  .thumb {
    width: 100%;
    height: 100%;
    background-size: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    transform-origin: 95% 40%;
    transition: all 0.3s ease-in-out;
  }
</style>

<script>
  import Vue from 'vue'
  import { vsprintf } from 'sprintf-js/dist/sprintf.min.js'
  import { regionData, CodeToText } from 'element-china-area-data'
  import { updateToSubmit } from '@/utils/utils'
  import { fetchQuery, fetchGet } from '@/api/restful'
  import { Loading } from 'element-ui'

  export default {
    data() {
      return {
        form: {
          avatar: '',
          group:{}
        },
        addressData: regionData,
        region: [],
        groups: [],
        roles: []
      };
    },
    methods: {
      save(){
        updateToSubmit.apply(this, [this.form])
      },
      onClose(){
        this.$router.push("/");
      }
    },
    mounted(){
      let loading = Loading.service({ target: this.$el.childNodes[0] });
      fetchGet('/user/'+this.$parent.selectedRow.id).then(response => {
        if(response.data.success){
          var user = response.data.result;
          var regionCode = user.regionCode;
          if(regionCode){
            var region = [regionCode.substring(0, 2)+'0000', regionCode.substring(0, 4)+'00', regionCode];
            user.regionName = CodeToText[region[0]]+'/'+CodeToText[region[1]]+'/'+CodeToText[region[2]];
            Vue.set(this.region, 0, region[0]);
            Vue.set(this.region, 1, region[1]);
            Vue.set(this.region, 2, region[2]);
          }
          for(var key in user){
            this.form[key] = user[key];
          }
        }
        loading.close();
      }).catch(() => {
        loading.close();
      });
      fetchQuery('/userGroup/query',{}).then( response => {
        if(response.data.success){
          for(var i=0; i<response.data.result.length; i++) {
            Vue.set(this.groups, i, response.data.result[i]);
          }
        }
      });
      fetchQuery('/role/query',{}).then( response => {
        if(response.data.success){
          for(var i=0; i<response.data.result.length; i++) {
            Vue.set(this.roles, i, response.data.result[i]);
          }
        }
      });
    }
  };
</script>
